<template>
  <div class="page">
    <Navbar title="中介评价详情" />
    <div class="content">
      <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
        <div class="list">
          <div
            class="list-item"
          >
            <div class="header f-r j-b a-c">
              <div class="title">{{ formDetail.projectName }}</div>
            </div>
            <div class="label">
              项目类型：{{ formDetail.projectType }}
            </div>
            <div class="label">
              项目进度：{{ statusName[formDetail.status] }}
            </div>
          </div>
          <div class="list-item">
            <div class="label">
              服务事项目：{{ formDetail.eventName }}
            </div>
            <div class="label">
              评价对象：{{ formDetail.corporateName }}
            </div>
            <div class="label f-r a-c">
              <span>满意度：</span>
              <van-rate
                :value="parseFloat(formDetail.score)"
                allow-half
                :size="24"
                color="#F47526"
                void-icon="star"
                void-color="#eee"
              />
            </div>
            <div class="label">
              评价内容：{{ formDetail.comment }}
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import refresh from '@/mixins/refresh'
import { http_mediation_evaluation } from '@/api'

export default {
  name: 'Project',
  mixins: [refresh],
  data() {
    return {
      activeTab: 0,
      formDetail: {
        star: 5
      },
      statusName: {
        0: '未关联 ',
        1: '未评价（已办理成功）  ',
        2: '已评价  ',
        3: '已关联未办理 '
      }
    }
  },
  methods: {
    onRefresh() {
      http_mediation_evaluation.read({
        id: this.$route.query.id
      }).then(res => {
        console.log(res)
        this.formDetail = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.page {
    .search-header {
        background-color: #fff;
        padding: 10px 0;
        padding-right: 0.32rem;
        .filter-box {
            flex-shrink: 0;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
        }
    }
    .list-item {
        width: 100%;
        background: #FFFFFF;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        .el-button {
            background: #2F86FD;
            border-color: #2F86FD;
            border-radius: 13px;
        }
        .header {
            .title {
                // height: 17px;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
                margin-right: 10px;
            }
            margin-bottom: 12px;
        }
        .label {
            font-size: 15px;
            line-height: 14px;
            font-family: PingFang SC;
            color: #999999;
            margin-bottom: 14px;
            &:last-of-type {
                margin-bottom: 0;
            }
        }
        .line-height24{
          line-height: 24px;
        }
        ::v-deep .el-step {
            .el-step__title {
                width: 60px;
                font-size: 10px;
                line-height: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #999999;
                margin-top: 5px;
            }
        }
    }
}
</style>
